@charset "utf-8";

/**
 * Created by MouMo on 2015年12月03日14:24:38
 * Ver 1.12 UpdateTime 2015年12月05日15:10:19
 */

// conmmon setting
$lte7: false;
$placeholder: false;

// import sasscore
@import './sassCore/base';

// css
.maxviwe{
  position: absolute;
  width:100%;
  height: 100%;
  left: 0;
  top:0;
}

body{
  background-image: url(../img/Logo.png);
  background-size: 140px;
  background-repeat: no-repeat;
  background-position: center 200px;
  background-color: #cfbfa9;
  overflow:hidden;
  @extend .maxviwe;
}



// test
.cia{
  border-color: #fff;
  border-width: 10px 10px 25px 10px;
  border-style: solid;
  border-radius: 3px;

  background: #fff;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;

  position: absolute;
  top:0;
  left:0;
  opacity:1;
  z-index: 50;
}
.pe{
  display: block;
}
.start{
  @extend .maxviwe;
  z-index: 200;
  background: #1a1a1a;
  img{
    width:80px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -40px;
    margin-top: -(76px/2);
  }
}

// 加载图片
.loadimg{
  img{
    visibility:hidden;
    position:absolute;
    top:0;
    left:0;
    width:0;
  }
}
// 装饰
.background{
  background-image: url(../img/bg.png);
  background-repeat: repeat-x;
  background-size: 300px auto;
  width:100%;
  height:200px;
  position: absolute;
  bottom: 0;
  left:0;
  background-position: left bottom;
  z-index: 1;
}
.cloud{
  width:60px;
  position: absolute;
  top:40px;
  opacity:0;
  z-index: 52;
}
.clouder{
  @extend .maxviwe;
}
// 控制器
.mclr{
  position:absolute;
  top:0;
  left: 0;
  z-index: 100;
  img{
    width:36px;
    height:36px;
    padding: 12px;
  }
}
.close{
  @extend .mclr;
  right: 0;
  left:auto;
}
// 关闭弹窗
.clmon-cl{
  @extend .maxviwe;
  background: rgba(0,0,0,0.4);
  z-index: 120;
  display:none;
}
.closebox{
  width:200px;
  position:absolute;
  height:250px;
  background:#fff;
  text-align: center;
  position:absolute;
  top:50%;
  left:50%;
  margin-left: -100px;
  margin-top: -125px;
  border-radius: 3px;
  button{
    margin-top: 20px;
    width:140px;
    height:36px;
  }
}



// 动画
.anout1{
  @include animation-name(anout1);
  @include animation-duration(16.8s);
  @include animation-timing-function(ease-out);
  @include animation-delay(0s);
}
.anout2{
  @include animation-name(anout2);
  @include animation-duration(16.8s);
  @include animation-timing-function(ease-out);
  @include animation-delay(0s);
}
// 图片动画
.imgan{
  @include animation-name(imgan);
  @include animation-duration(12s);
  @include animation-timing-function(ease);
}
// 背景动画
.bgan{
  @include animation-name(bgan);
  @include animation-duration(10s);
  @include animation-timing-function(linear);
  @include animation-iteration-count(infinite);
}
.cloudan{
  @include animation-name(cloudan);
  @include animation-duration(8s);
  @include animation-timing-function(linear);
  @include animation-delay(0s);
}
.cloudan-l{
  @include animation-name(cloudan-l);
  @include animation-duration(8s);
  @include animation-timing-function(linear);
  @include animation-delay(0s);
}
.rotate{
  @include animation-name(rotate);
  @include animation-duration(3s);
  @include animation-timing-function(linear);
  @include animation-iteration-count(infinite);
}


// @include keyframes(anout1){};

// 帧
@-webkit-keyframes anout1{
   0%{ -webkit-transform:translate3D(70%,50%,0) rotate3D(0,0,1,-100deg) scale3D(1.4,1.4,1); opacity:0.2;}
   5%{ opacity:1;}
  16%{ -webkit-transform:translate3D(40%,0,0) scale3D(1,1,1); opacity:1;}
 100%{ -webkit-transform:translate3D(-150%,0,0); opacity:1;}
}
@-webkit-keyframes anout2{
   0%{ -webkit-transform:translate3D(0%,-50%,0) rotate3D(0,0,1,-100deg) scale3D(0.5,0.5,1); opacity:1;}
   7%{ -webkit-transform:translate3D(50%,0,0) scale3D(1,1,1); }
 100%{ -webkit-transform:translate3D(-150%,0,0); opacity:1;}
}

@-webkit-keyframes imgan{
   0%{ -webkit-transform:translate3D(0,-14%,0) scale3D(1.2,1.2,1.2);}
 100%{ -webkit-transform:translate3D(0,14%,0) scale3D(1.4,1.4,1.3);}
}
@-webkit-keyframes bgan{
   0%{ background-position: 0% bottom;}
 100%{ background-position: 500% bottom;}
}
@-webkit-keyframes cloudan{
   0%{ -webkit-transform:translate3D(0,0,0); opacity:0.1;}
  20%{ opacity:1;}
  70%{ opacity:1;}
 100%{ -webkit-transform:translate3D(600px,0,0); opacity:0;}
}
@-webkit-keyframes cloudan-l{
   0%{ -webkit-transform:translate3D(500%,0,0); opacity:0.1;}
  20%{ opacity:1;}
  70%{ opacity:1;}
 100%{ -webkit-transform:translate3D(0,0,0); opacity:0;}
}
@-webkit-keyframes rotate{
   0%{ -webkit-transform: rotate3D(0,0,1,0deg);}
  50%{ -webkit-transform: rotate3D(0,0,1,-180deg);}
 100%{ -webkit-transform: rotate3D(0,0,1,-359deg);}
}